@extends('admin::layouts.app')

@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h3 style="float: left;">话题列表</h3>
            </div>
            <div class="card-body">
                <table class="table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if($users->count())
                        @foreach($users as $v)
                            <tr>
                                <td>{{$v->id}}</td>
                                <td>{{$v->name}}</td>
                                <td>{{$v->email}}</td>
                                <td>
                                    <button type="button" class="btn" @click="edit({{$v->id}})">修改</button>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                    </tbody>
                </table>
                @if($users->count())
                    <div class="pagination">
                        <li class="page-item">共{{$users->total()}}条记录</li> &nbsp;{{$users->links()}}
                    </div>
                @endif
            </div>
        </div>
        <div class="modal fade" id="category-form">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form>
                        <div class="modal-header">
                            <h4 class="modal-title"></h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="name">用户名:</label>
                                <input type="text" v-model="form.field.name" class="form-control" id="name">
                                <template v-if="form.errors.name"><span class="text-danger" >@{{form.errors.name[0]}}</span></template>
                            </div>
                            <div class="form-group">
                                <label for="sort">email:</label>
                                <input type="email" class="form-control" :value="form.field.email" id="email" disabled >
                                <template v-if="form.errors.sort"><span class="text-danger" >@{{form.errors.email[0]}}</span></template>
                            </div>
                            <div class="form-group">
                                <label for="roles">角色:</label>
                                <select class="form-control" v-model="form.field.roles" multiple>
                                    <option value="">不选任何角色</option>
                                    @foreach(config('roles') as $v)
                                        <option value="{{$v['value'] ?? ''}}">{{ $v['name'] ?? '' }}</option>
                                    @endforeach
                                </select>
                                {{--<template v-if="form.errors.sort"><span class="text-danger" >@{{form.errors.email[0]}}</span></template>--}}
                            </div>

                            <div class="form-group">
                                <label for="sort">密码:</label>
                                <input type="password" class="form-control" v-model="form.field.password" id="password" >
                                <template v-if="form.errors.password"><span class="text-danger" >@{{form.errors.password[0]}}</span></template>
                            </div>
                            <div class="form-group">
                                <label for="password-confirmation ">确认密码:</label>
                                <input type="password" class="form-control" v-model="form.field.password_confirmation " id="password-confirmation " >
                            </div>
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input class="form-check-input" type="checkbox" v-model="is_disabled" id="is_disabled"> 是否禁用
                                </label>
                            </div>
                            <template v-if="is_disabled">
                                <div class="form-group">
                                    <label for="name">禁用时间（单位天）:</label>
                                    <input type="text" v-model="form.field.disabled_duration" class="form-control" id="disabled_duration">
                                    <template v-if="form.errors.disabled_duration"><span class="text-danger" >@{{form.errors.disabled_duration[0]}}</span></template>
                                </div>
                            </template>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" @click="submitForm()">保存</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        new Vue({
            el:'#app',
            mounted() {

            },
            data() {
                return {
                    form:{
                        field:{
                            roles:[]
                        },
                        errors:{}
                    },
                    is_disabled:null
                }
            },
            methods:{
                edit(id) {
                    this.form.field.id = id;
                    $('#category-form .modal-title').html('修改用户');
                    axios.get('/admin/user/get_one/'+ id).then((response) => {
                        this.form.field = response.data;
                    }).catch((error) => {
                        console.log(error)
                    });
                    $('#category-form').modal('show');
                },
                submitForm() {
                    if (this.is_disabled) {
                        this.form.field.is_disabled = this.is_disabled;
                    }
                    axios.post('{{route('admin.user.save')}}',this.form.field).then((response) => {
                        if (response.status) {
                            $('#category-form').modal('hide');
                            //window.location.reload();
                        }
                    }).catch((error) => {
                        if (error.response.status == 422) {
                            this.form.errors = error.response.data.errors;
                        }
                    });
                    this.is_disabled = null;
                },
                clearForm() {
                    this.form.field = {};
                    this.form.errors = {};
                }
            }
        });
    </script>
@endsection
